<template>
  <div>
    <q-card class="q-ma-md">
      <q-card-section>
        <div class="text-h6">工作台关注方向配置</div>
        <div class="text-subtitle2">关注方向与每个方向下的兴趣标签</div>
      </q-card-section>
      <q-card-section>
        <q-list separator>
          <q-item v-for="item in directions" :key="item.id" v-ripple>
            <q-item-section avatar>
              <q-icon color="primary" name="star"/>
            </q-item-section>
            <q-item-section class="col-1">
              <q-item-label>
                {{ item.name }}
                <q-popup-edit v-model="item.name" content-class="bg-accent text-white">
                  <q-input dark color="white" v-model="item.name" dense autofocus counter>
                    <template v-slot:append>
                      <q-icon name="edit"/>
                    </template>
                  </q-input>
                </q-popup-edit>
              </q-item-label>
            </q-item-section>
            <q-item-section class="col">
              <tool-tag-chip-group v-model="item.tags"></tool-tag-chip-group>
            </q-item-section>
            <q-item-section class="col-1">
              <q-btn flat icon="delete" @click="deleteDirection(item.id)"></q-btn>
            </q-item-section>
          </q-item>
        </q-list>
      </q-card-section>
      <q-card-actions align="left">
        <q-btn @click="createDirection" color="green">新增更多关注方向</q-btn>
        <q-btn @click="saveDirections" color="primary">保存编辑</q-btn>
      </q-card-actions>
    </q-card>
  </div>
</template>

<script>

import ToolTagChipGroup from 'components/ToolTagChipGroup'
import iConfig from 'src/api/config'

export default {
  name: 'WorkbenchConfig',
  components: {
    ToolTagChipGroup
  },
  data () {
    return {
      dialogVisible: false,
      formData: {},
      isLoading: false,
      directionObjectId: null,
      directions: [
        {
          id: 1,
          name: '技术',
          tags: []
        },
        {
          id: 2,
          name: '创意',
          tags: []
        },
        {
          id: 3,
          name: '娱乐',
          tags: []
        },
        {
          id: 4,
          name: '金融',
          tags: []
        },
        {
          id: 5,
          name: '管理',
          tags: []
        }
      ]
    }
  },
  async mounted () {
    const id = 'WORKBENCH_DIRECTION'
    let directionsConfig = await iConfig.findByConfigId({ query: { id } })
    console.log(directionsConfig)
    if (directionsConfig) {
      this.directions = directionsConfig.data
    }
    if (!directionsConfig) {
      await iConfig.create({ id, data: this.directions })
      directionsConfig = await iConfig.findByConfigId({ query: { id } })
    }
    this.directionObjectId = directionsConfig._id
  },
  methods: {
    deleteDirection (id) {
      this.$q.dialog({
        title: '删除确认',
        message: '确认是否要删除？',
        cancel: true,
        persistent: true
      }).onOk(async () => {
        this.directions = this.directions.filter(e => e.id !== id)
      })
    },
    createDirection () {
      this.directions.push({
        id: +new Date(),
        name: '点击编辑',
        tags: []
      })
    },
    saveDirections () {
      iConfig.updateById({
        id: this.directionObjectId,
        update: {
          data: this.directions
        }
      })
    }
  }

}
</script>

<style lang="scss">

</style>
